<template>
  <div>
    <h1>Hello {{ name }}</h1>
    <p>firstName: {{ firstName }}</p>
    <button @click="fn1">修改name</button>
  </div>
</template>

<script setup>
import { computed, useAttrs, useSlots } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true, // 必须传递
  },
});

// defineEmits 返回一个 emit 函数，通过这个 emit 函数去触发自定义事件
const emit = defineEmits(["abcd"]);

const attrs = useAttrs();
const slots = useSlots();
console.log(slots);

const firstName = computed(() => {
  return props.name[0];
});

function fn1() {
  // 触发一个自定义事件，让父组件自行处理
  emit("abcd", "里斯");
}

function abc() {
  console.log("abc");
}

// 使用 defineExpose 函数，定义组件可以暴露的数据与方法
defineExpose({
  abc: abc,
});
</script>
